<template>
	<view>
		<fu-popup v-model="sharePopup" mode="bottom" :safe-area-inset-bottom="true" :mask-close-able="true"
			border-radius="24">
			<view class="padding">
				<view class="flex">
					<view class="flex-sub text-center">{{i18n['分享到']}}</view>
					<view class="cuIcon-close" @tap.stop="close"></view>
				</view>
				<view class="padding-tb">
					<!-- APP平台 start -->
					<!-- #ifdef APP-PLUS -->
					<view class="grid col-4">
						<block v-for="(item,index) in shareList" :key="index">
							<view v-if="provider.includes(item.type)"
								class="height-200 flex flex-direction align-center justify-center"
								@tap.stop="share(item)">
								<image class="fu-block-85" :src="item.icon" mode="aspectFit"></image>
								<text class="margin-top-xs text-sm">{{item.title}}</text>
							</view>
						</block>
					</view>
					<!-- #endif -->
					<!-- APP平台 end -->

					<!-- 微信小程序平台 start -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="grid col-2">
						<view>
							<button class="height-200 flex flex-direction align-center justify-center cu-btn bg-white"
								open-type="share">
								<image class="fu-block-85" :src="require('./static/weixin.png')" mode="aspectFit">
								</image>
								<text class="margin-top-xs text-sm">{{i18n['微信好友']}}</text>
							</button>
						</view>
						<view>
							<button class="height-200 flex flex-direction align-center justify-center cu-btn bg-white"
								@tap.stop="createPoster">
								<image class="fu-block-85" :src="require('./static/poster1.png')" mode="aspectFit">
								</image>
								<text class="margin-top-xs text-sm">{{i18n['二维码海报']}}</text>
							</button>
						</view>
					</view>
					<!-- #endif -->
					<!-- 微信小程序平台 end -->

					<!-- H5平台 staart -->
					<!-- #ifdef H5 -->
					<view class="grid col-3">
						<view>
							<button class="height-200 flex flex-direction align-center justify-center cu-btn bg-white"
								@tap.stop="createPoster">
								<image class="fu-block-85" :src="require('./static/poster1.png')" mode="aspectFit">
								</image>
								<text class="margin-top-xs text-sm">{{i18n['二维码海报']}}</text>
							</button>
						</view>
						<view>
							<button class="height-200 flex flex-direction align-center justify-center cu-btn bg-white"
								@tap.stop="copyLink">
								<image class="fu-block-85" :src="require('./static/poster1.png')" mode="aspectFit">
								</image>
								<text class="margin-top-xs text-sm">{{i18n['复制链接']}}</text>
							</button>
						</view>
					</view>
					<!-- #endif -->
					<!-- H5平台 end -->
				</view>
			</view>
		</fu-popup>
		<fu-popup v-model="posterPopup" mode="bottom" :safe-area-inset-bottom="true" :mask-close-able="true"
			border-radius="24">
			<view class="padding">
				<view class="flex align-center justify-between">
					<view class="text-df text-333">{{i18n['保存到相册']}}</view>
					<view class="cuIcon-roundclosefill text-bf text-lg" @click.stop="close"></view>
				</view>
				<view class="margin-top flex justify-center align-center">
					<image class="preview-image radius-8 width-375 height-550 text-lg text-white" :src="previewImageUrl"
						mode="aspectFill" @click="previewImage(previewImageUrl)"></image>
				</view>
				<!-- #ifndef H5 -->
				<view class="margin-top" @click="saveImage">
					<button class="height-80 bg-theme text-lg text-white cu-btn block round">{{i18n['保存图片']}}</button>
				</view>
				<!-- #endif -->
			</view>
		</fu-popup>
		<view class="offset-canvas">
			<canvas canvas-id="poster-canvas" style="width: 375px;height: 550px;"></canvas>
		</view>
	</view>
</template>

<script>
	/**
	 * @alias 刘欢
	 * @description 常规分享组件,提供分享到微信,微信朋友圈,QQ,QQ空间,分享海报等功能
	 * @param { Boollean } isShareToMp 是否分享到小程序
	 * */
	const providers = [{
			title: global.i18n['微信好友'],
			icon: require('./static/weixin.png'),
			type: 'weixin',
			scene: 'WXSceneSession'
		},
		{
			title: global.i18n['朋友圈'],
			icon: require('./static/pengyouquan.png'),
			type: 'weixin',
			scene: 'WXSenceTimeline'
		},
		// {
		//   title: global.i18n['QQ好友'],
		//   icon: require('./static/qq.png'),
		//   type: 'qq'
		// },
		// {
		//   title: global.i18n['QQ空间'],
		//   icon: require('./static/kongjian.png'),
		//   type: 'qq'
		// },
		// {
		//   title: global.i18n['新浪微博'],
		//   icon: require('./static/weibo.png'),
		//   type: 'sinaweibo'
		// },
		{
			title: global.i18n['复制链接'],
			icon: require('./static/copy1.png'),
			type: 'link'
		},
		{
			title: global.i18n['二维码海报'],
			icon: require('./static/poster1.png'),
			type: 'image'
		}
	];
	export default {
		props: {
			info: Object,
			isShareToMp: {
				type: Boolean,
				default: false,
			},
			// 是否展示海报/
			is_showPoter: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				ctx: null,
				previewImageUrl: '',
				shareList: [{
						title: global.i18n['微信好友'],
						icon: require('./static/weixin.png'),
						type: 'weixin',
						scene: 'WXSceneSession'
					},
					{
						title: global.i18n['朋友圈'],
						icon: require('./static/pengyouquan.png'),
						type: 'weixin',
						scene: 'WXSenceTimeline'
					},
					// {
					// 	title: global.i18n['QQ好友'],
					// 	icon: require('./static/qq.png'),
					// 	type: 'qq'
					// },
					// {
					// 	title: global.i18n['QQ空间'],
					// 	icon: require('./static/kongjian.png'),
					// 	type: 'qq'
					// },
					// {
					// 	title: global.i18n['新浪微博'],
					// 	icon: require('./static/weibo.png'),
					// 	type: 'sinaweibo'
					// },
					{
						title: global.i18n['复制链接'],
						icon: require('./static/copy1.png'),
						type: 'link'
					},
					{
						title: global.i18n['二维码海报'],
						icon: require('./static/poster1.png'),
						type: 'image'
					}
				],
				provider: [], // 已配置的服务供应商
				sharePopup: false,
				posterPopup: false,
			}
		},
		methods: {
			// 图片点击放大
			previewImage(url) {
				uni.previewImage({
					current: url,
					urls: [url]
				})
			},
			// 打开弹窗
			open() {
				console.log(this.info, 888888)
				this.sharePopup = true;
			},
			// 关闭弹窗
			close() {
				this.sharePopup = false;
				this.posterPopup = false;
			},
			// 初始化分享数据
			init() {
				this.sharePopup = false;
				this.posterPopup = true;
				this.initCanvas();
				console.log("init????")
			},
			// 获取服务商列表
			getProvider() {
				uni.getProvider({
					service: "share",
					success: (data) => {
						console.log('已配置的分享服务', data);
						if (this.is_showPoter) {
							this.provider = [...data.provider, 'link', 'image'];
						} else {
							this.provider = [...data.provider, 'link'];
						}
					}
				})
			},
			share(item){
				this.$util.throttle(()=>{
					this.confirm(item)
				},2500)
			},
			// 分享
			confirm(item) {
				let _scene = '';
				let _provider = item.type;
				let _type = 0;
				switch (_provider) {
					case 'weixin':
						_scene = item.scene;
						uni.share({
							provider: _provider,
							type: _type,
							title: this.info.goodsName,
							scene: _scene,
							summary: this.info.summary,
							href: this.info.href,
							imageUrl: this.info.goodsImage,
							success: res => {
								this.close();
							},
							fail: err => {
								console.log('分享失败', err);
								this.$message.info(global.i18n['分享失败']);
							}
						});
						break;
					case 'qq':
						_type = 1;
						uni.share({
							provider: _provider,
							type: _type,
							title: this.info.goodsName,
							scene: _scene,
							summary: this.info.summary,
							href: this.info.href,
							imageUrl: this.info.goodsImage,
							success: res => {
								this.close();
							},
							fail: err => {
								console.log('分享失败', err);
								this.$message.info(global.i18n['分享失败']);
							}
						});
						break;
					case 'sinaweibo':
						uni.share({
							provider: _provider,
							type: _type,
							title: this.info.goodsName,
							scene: _scene,
							summary: this.info.summary,
							href: this.info.href,
							imageUrl: this.info.goodsImage,
							success: res => {
								this.close();
							},
							fail: err => {
								console.log('分享失败', err);
								this.$message.info(global.i18n['分享失败']);
							}
						});
						break;
					case 'link':
						this.copyLink()
						break;
					case 'image':
						this.createPoster();
						break;
				}
			},
			copyLink() {
				console.log(this.info.href);
				uni.setClipboardData({
					data: this.info.href,
					success: () => {
						this.$message.success(global.i18n['复制成功'])
						this.close();
					}
				});
			},
			// 生成海报
			createPoster() {
				console.log('生成海报')
				this.$util.actionAuth(() => {
					this.init();
					// this.$emit('getPosterInfo');
				})
			},
			// 初始化画布
			initCanvas() {
				uni.showLoading({
					title: global.i18n['海报生成中...'],
					mask: true,
				})
				console.log('开始绘图', this.info);
				this.ctx = uni.createCanvasContext('poster-canvas', this);
				setTimeout(() => {
					this.drawBack();
				}, 200);
			},
			// 绘制背景
			drawBack() {
				let ctx = this.ctx;
				ctx.setFillStyle('#FFFFFF');
				ctx.fillRect(0, 0, 375, 550);
				ctx.draw(false, () => {
					console.log("背景绘制成功");
					this.drawUserInfo();
				});
			},
			// 绘制个人信息
			async drawUserInfo() {
				let ctx = this.ctx;
				console.log(this.info);
				await new Promise(resolve => {
					uni.getImageInfo({
						src: this.info.avatar,
						success: (res) => {
							console.log('头像图片', res);
							let {
								width,
								height,
								path
							} = res;
							let r = width / 2;
							let cx = 20 + r;
							let cy = 20 + r;
							console.log(width, height, cx, cy, r, '=============');
							ctx.arc(cx, cy, r, 0, 2 * Math.PI);
							ctx.clip()
							if (width > height) {
								let startX = (width - height) / 2;
								ctx.drawImage(res.path, startX, 0, height, height, 20, 20, 50, 50);
							} else if (width < height) {
								let startY = (height - width) / 2;
								ctx.drawImage(res.path, 0, startY, width, width, 20, 20, 50, 50);
							} else {
								ctx.drawImage(res.path, 20, 20, 50, 50);
							}

							resolve();
						},
						fail: (err) => {
							uni.hideLoading();
							this.$message.info(global.i18n['获取头像信息失败']);
							console.log("获取图片信息失败", err);
						}
					})
				});

				ctx.setFillStyle('#333333');
				ctx.setFontSize(18);
				ctx.fillText(this.info.name, 90, 40);
				ctx.setFillStyle(this.$store.state.themeColor);
				ctx.setFontSize(16);
				ctx.fillText(global.i18n['推荐一个好物给你,请查收'], 90, 65);
				ctx.draw(true, () => {
					console.log('个人信息绘制成功');
					this.drawGoodsImage();
				});
			},
			// 绘制商品图片
			async drawGoodsImage() {
				let ctx = this.ctx;
				await new Promise(resolve => {
					uni.getImageInfo({
						src: this.info.goodsImage,
						success: (res) => {
							console.log('商品图片', res)
							let {
								width,
								height,
								path
							} = res;
							if (width > height) {
								let startX = (width - height) / 2;
								ctx.drawImage(res.path, startX, 0, height, height, 20, 90, 335,
									335);
							} else if (width < height) {
								let startY = (height - width) / 2;
								ctx.drawImage(res.path, 0, startY, width, width, 20, 90, 335, 335);
							} else {
								ctx.drawImage(res.path, 20, 90, 335, 335);
							}

							resolve();
						},
						fail: (err) => {
							uni.hideLoading();
							console.log("商品图片绘制失败", err)
							this.$message.info(global.i18n['获取商品图片信息失败']);
						}
					})
				});
				ctx.draw(true, () => {
					console.log("商品图片绘制成功");
					this.drawGoodsInfo();
				});
			},
			// 绘制商品名称价格
			drawGoodsInfo() {
				let ctx = this.ctx;
				this.drawText(ctx, this.info.goodsName, 20, 455, 240, 2, '#333333', 18);
				ctx.setFontSize(20);
				ctx.setFillStyle('#FE5014');
				ctx.fillText('￥' + this.info.price, 20, 510);
				ctx.draw(true, () => {
					console.log("商品信息绘制成功");
					this.drawCode();
					// this.exportImage();
				});
			},
			// 绘制二维码
			async drawCode() {
				console.log(this.info.code, 'drawCode')
				let ctx = this.ctx;
				await new Promise(resolve => {
					uni.getImageInfo({
						src: this.info.code,
						success: (res) => {
							console.log('二维码信息', res);
							let {
								width,
								height,
								path
							} = res;
							if (width > height) {
								let startX = (width - height) / 2;
								ctx.drawImage(res.path, startX, 0, height, height, 275, 445, 80,
									80);
							} else if (width < height) {
								let startY = (height - width) / 2;
								ctx.drawImage(res.path, 0, startY, width, width, 275, 445, 80, 80);
							} else {
								ctx.drawImage(res.path, 275, 445, 80, 80);
							}
							resolve();
						},
						fail: (err) => {
							console.log('二维码绘制失败', err);
							uni.hideLoading();
							this.$message.info(global.i18n['获取二维码信息失败']);
						}
					})
				});
				ctx.draw(true, () => {
					console.log("二维码绘制成功");
					this.exportImage();
				})
			},
			// 导出图片
			exportImage() {
				uni.canvasToTempFilePath({
					canvasId: 'poster-canvas',
					success: (res) => {
						uni.hideLoading();
						console.log('导出图片成功', res);
						this.previewImageUrl = res.tempFilePath;
					},
					fail: (err) => {
						uni.hideLoading();
						console.log("导出图片失败", err);
					}
				}, this);
			},
			// 保存图片
			saveImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.previewImageUrl,
					success: (res) => {
						console.log(res);
						this.$message.info(global.i18n['保存成功']);
						this.close();
					}
				})
			},
			/**
			 * @description 绘制图片通用方法
			 * @param {Object} ctx - canvas上下文
			 * @param {String} 图片路径 - canvas上下文
			 * */
			async drawImage(ctx, path, ) {


			},
			/**
			 * @description 绘制文本通用方法
			 * @param {Object} ctx - canvas上下文
			 * @param {String} text - 文本
			 * @param {Number} startX - X轴开始位置
			 * @param {Number} startY - Y轴开始位置
			 * @param {Number} limitWidth - 文字绘制区限制宽度
			 * @param {Number} limitLine - 文字绘制限制行数
			 * @param {String} color - 文字颜色
			 * @param {Number} size - 字体大小
			 * */
			drawText(ctx, text, startX, startY, limitWidth, limitLine = 2, color = '#333333', size = 18, isBold = false) {
				ctx.setFillStyle(color);
				ctx.setFontSize(size);
				let arrText = text.split('');
				let line = '';
				let column = 0;
				for (let n = 0, len = arrText.length; n < len; n++) {
					let testline = line + arrText[n];
					let metrics = ctx.measureText(testline);
					let testWidth = metrics.width;
					if (testWidth > limitWidth && n > 0 && column < limitLine) {
						ctx.fillText(line, startX, startY);
						column += 1;
						line = arrText[n];
						startY += size * 1.5;
					} else {
						line = testline;
					}
				}
				if (column < limitLine) {
					ctx.fillText(line, startX, startY);
				}
			},
		},
		created() {
			console.log('组件 created');
			this.getProvider();
		},
	}
</script>

<style lang="scss" scoped>
	.preview-image {
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .2);
	}

	.offset-canvas {
		position: fixed;
		top: -1000px;
		left: 0;
		z-index: 9999;
	}
</style>
